<template>
  <div class="container">
    <div class="query-form">
      <el-form ref="formRef" :model="queryForm" :rules="rules" inline>
        <el-form-item>
          <el-button type="primary" @click="handleExportClick">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="isLoading" :data="bankReconciliations" border>
      <el-table-column label="1" prop="1"/>
      <el-table-column label="2" prop="2"/>
      <el-table-column label="3" prop="3"/>
      <el-table-column label="4" prop="4"/>
      <el-table-column label="工资" prop="salary"/>
      <el-table-column label="发放日期" prop="releaseDate"/>
      <el-table-column label="14" prop="14"/>
      <el-table-column label="银行账户名" prop="bankAccountName"/>
      <el-table-column label="银行户口号码" prop="bankAccountNumber"/>
      <el-table-column label="36" prop="36"/>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {ElForm, ElMessage, FormRules} from "element-plus";
import {utils, writeFile} from "xlsx";

const isLoading = ref(false)
const queryForm = ref()
const formRef = ref<InstanceType<typeof ElForm>>()
const rules: FormRules = {}

interface BankReconciliationResponse {
  1?: string
  2?: string
  3?: string
  4?: string
  salary?: number
  releaseDate?: string
  14?: string
  bankAccountName?: string
  bankAccountNumber?: string
  36?: string
}

const bankReconciliations = ref<BankReconciliationResponse[]>([])

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true;
  }
  setInterval(() => {
    bankReconciliations.value = [{
      1: "HKP",
      2: "HK",
      3: "1234567890",
      4: "HKD",
      salary: 10.3,
      releaseDate: "20230706",
      14: "MINISO LINKAGE HONG KONG LIMITED",
      bankAccountName: "EMPLOYEE NAME",
      bankAccountNumber: "EMPLOYEE BANK AC NO",
      36: "PAYROLL",
    }]
    isLoading.value = false
  }, 1000)
}

getData()

function handleExportClick() {
  if (bankReconciliations.value.length > 0) {
    const processedData: {
      1?: string
      2?: string
      3?: string
      4?: string
      "工资"?: number
      "发放日期"?: string
      14?: string
      "银行账户名"?: string
      "银行户口号码"?: string
      36?: string
    }[] = bankReconciliations.value.map((bankReconciliation: BankReconciliationResponse) => ({
      1: bankReconciliation["1"],
      2: bankReconciliation["2"],
      3: bankReconciliation["3"],
      4: bankReconciliation["4"],
      "工资": bankReconciliation.salary,
      "发放日期": bankReconciliation.releaseDate,
      14: bankReconciliation["14"],
      "银行账户名": bankReconciliation.bankAccountName,
      "银行户口号码": bankReconciliation.bankAccountNumber,
      36: bankReconciliation["36"]
    }))
    const workBook = utils.book_new()
    const workSheet = utils.json_to_sheet(processedData)
    utils.book_append_sheet(workBook, workSheet)
    writeFile(workBook, "output.xlsx")
  } else {
    ElMessage.error("没有数据可以导出")
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
</style>
